<template>
  <div class="colWrapper">
    <!--    面包屑l-->
    <div class="breadcrumb">
      <Breadcrumb>
        <BreadcrumbItem>机器管理</BreadcrumbItem>
        <BreadcrumbItem>视频预览</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <!--    内容区-->
    <div class="colWrapper bodyCon">
      <div class="rowWrapper item">
        <div class="video">
          <video ref="video" width="100%" controls name="media" style="height: 300px"></video>
        </div>

        <div class="colWrapper introduction">
          <!--       标题   -->
          <div class="inTitle">
            <span>视频简介:</span>
          </div>
          <div class="colWrapper">
            <div class="colWrapper inBody">
              <div class="rowWrapper inItem">
                <span>视频所属设备：B1203</span>
              </div>
              <div class="rowWrapper inItem">
                <span>视频ID：0112</span>
              </div>
              <div class="rowWrapper inItem">
                <span>视频名称：视频1</span>
              </div>
              <div class="rowWrapper inItem">
                <span>视频说明：</span>
              </div>
            </div>
            <div class="inButton">
              <Button type="error">删除</Button>
            </div>
          </div>
        </div>
      </div>
      <div class="rowWrapper item">
        <div class="video">
          <video ref="video" width="100%" controls name="media" style="height: 300px"></video>
        </div>

        <div class="colWrapper introduction">
          <!--       标题   -->
          <div class="inTitle">
            <span>视频简介:</span>
          </div>
          <div class="colWrapper">
            <div class="colWrapper inBody">
              <div class="rowWrapper inItem">
                <span>视频所属设备：B1203</span>
              </div>
              <div class="rowWrapper inItem">
                <span>视频ID：0112</span>
              </div>
              <div class="rowWrapper inItem">
                <span>视频名称：视频1</span>
              </div>
              <div class="rowWrapper inItem">
                <span>视频说明：</span>
              </div>
            </div>
            <div class="inButton">
              <Button type="error">删除</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../style/main.css'

export default {
  name: "videoPreview"
}
</script>

<style scoped>
.breadcrumb {
  width: 100%;
  align-self: flex-start;
}

.video {
  width: 511px;
}

.bodyCon {
  margin-top: 20px;
  width: 100%;
}

.item {
  width: 100%;
}

.inTitle {
  align-self: flex-start;
}

.inTitle > span {
  color: rgba(80, 80, 80, 1);
  font-size: 35px;
}

.inBody {
  margin-top: 20px;
  align-items: flex-start;
}

.introduction {
  align-self: flex-start;
  height: 100%;
  margin-left: 20px;
}

.inItem {
  margin-top: 10px;
}

.inButton {
  margin-top: 20px;
}
</style>
